<template>
    <div class="index">
        <el-container>
            <el-header>
                <el-row type="flex" justify="space-between" align="middle">
                    <div></div>
                    <div>
                        <span>{{ $store.state.user.nickname }}</span>
                        <el-button @click="logout">退出登录</el-button>
                    </div>
                </el-row>
            </el-header>
            <el-container>
                <el-aside>
                    <!-- 
                        @open="handleOpen"
                        @close="handleClose"
                     -->
                    <el-menu default-active="1" router>
                        <el-menu-item index="/room">
                            <i class="el-icon-setting"></i>
                            <span slot="title">教室管理</span>
                        </el-menu-item>

                        <el-menu-item index="/grade">
                            <i class="el-icon-setting"></i>
                            <span slot="title">班级管理</span>
                        </el-menu-item>

                        <el-menu-item index="/student">
                            <i class="el-icon-setting"></i>
                            <span slot="title">学生管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <!-- 路由占位 -->
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
export default {
    methods: {
        logout() {
            // ...
            window.localStorage.removeItem("user");
            this.$router.push("/login");
            this.$store.commit("logout");
        },
    },
};
</script>
